<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3正方体</title>
<style>
*{ margin:0; padding:0;}
body > div{ position:absolute; top:200px; z-index:5; left:200px; width:200px; border:1px solid #000;}
.box1{ height:100px;transform:skew(-45deg ); -webkit-transform:skew(-45deg);  -moz-transform:skew(-45deg); }
.box2{ top:300px;left:150px; height:200px; border-top:none; }
.box3{ left:210px;top:300px; width:141px; height:140px; border-top:none;  border-right:none; transform:rotateZ(-135deg) skewY(45deg); -webkit-transform:rotateZ(-135deg) skewY(45deg); -moz-transform:rotateZ(-135deg) skewY(45deg); transform-origin:top right; -webkit-transform-origin:top right; -moz-transform-origin:top RIGHT; }
.box4{z-index:3; top:400px; height:100px;  border:none;border-top:1px dashed rgba(102,102,102,0.8);  border-left:1px dashed rgba(102,102,102,0.8);transform:skew(-45deg ); -webkit-transform:skew(-45deg); -moz-transform:skew(-45deg);}
.box5{ z-index:3;left:250px; height:200px; border:none; border-left:1px dashed rgba(102,102,102,0.8); }
</style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
</body>
</html>